<template>
  <div class="pets-list">
    <div class="container">
      <h1 class="page-title">可领养宠物</h1>
      
      <div class="filter-section">
        <el-card>
          <template #header>
            <div class="filter-header">
              <h3>筛选条件</h3>
              <el-button link @click="resetFilters">重置筛选</el-button>
            </div>
          </template>
          
          <el-form :model="filters" label-width="80px">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="6">
                <el-form-item label="类别">
                  <el-select v-model="filters.category_id" placeholder="全部类别" clearable @change="applyFilters">
                    <el-option
                      v-for="category in categories"
                      :key="category.id"
                      :label="category.name"
                      :value="category.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              
              <el-col :xs="24" :sm="12" :md="6">
                <el-form-item label="性别">
                  <el-select v-model="filters.gender" placeholder="全部性别" clearable @change="applyFilters">
                    <el-option label="公" value="male" />
                    <el-option label="母" value="female" />
                  </el-select>
                </el-form-item>
              </el-col>
              
              <el-col :xs="24" :sm="12" :md="6">
                <el-form-item label="状态">
                  <el-select v-model="filters.is_adopted" placeholder="全部状态" clearable @change="applyFilters">
                    <el-option label="可领养" :value="false" />
                    <el-option label="已领养" :value="true" />
                  </el-select>
                </el-form-item>
              </el-col>
              
              <el-col :xs="24" :sm="12" :md="6">
                <el-form-item label="搜索">
                  <el-input 
                    v-model="searchQuery" 
                    placeholder="搜索宠物名称"
                    clearable
                    @keyup.enter="applyFilters"
                  >
                    <template #append>
                      <el-button @click="applyFilters">
                        <i class="el-icon-search"></i>
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      
      <div class="pets-container">
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="3" animated />
        </div>
        
        <div v-else-if="pets.length === 0" class="empty-container">
          <el-empty description="没有找到符合条件的宠物" />
        </div>
        
        <div v-else class="pet-grid">
          <pet-card v-for="pet in pets" :key="pet.id" :pet="pet" />
        </div>
      </div>
      
      <div class="pagination-container" v-if="pets.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.limit"
          :current-page="pagination.page"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import PetCard from '@/components/pets/PetCard.vue';

export default {
  name: 'PetsList',
  components: {
    PetCard
  },
  data() {
    return {
      searchQuery: '',
      filters: {
        category_id: null,
        gender: null,
        is_adopted: false
      }
    };
  },
  computed: {
    ...mapGetters({
      pets: 'pets/getPets',
      pagination: 'pets/getPagination',
      categories: 'categories/allCategories',
      loading: 'isLoading'
    })
  },
  async created() {
    await this.fetchCategories();
    
    // 从URL获取过滤条件
    const { category_id, gender, is_adopted } = this.$route.query;
    if (category_id) this.filters.category_id = parseInt(category_id);
    if (gender) this.filters.gender = gender;
    if (is_adopted) this.filters.is_adopted = is_adopted === 'true';
    
    this.fetchPets();
  },
  methods: {
    ...mapActions({
      fetchPetsAction: 'pets/fetchPets',
      setFilters: 'pets/setFilters',
      resetFiltersAction: 'pets/resetFilters',
      setPage: 'pets/setPage',
      fetchCategories: 'categories/fetchCategories'
    }),
    async fetchPets() {
      await this.setFilters(this.filters);
      // 发送搜索查询
      this.fetchPetsAction(this.searchQuery);
      // 更新URL参数
      this.updateUrlParams();
    },
    applyFilters() {
      this.fetchPets();
    },
    resetFilters() {
      this.filters = {
        category_id: null,
        gender: null,
        is_adopted: false
      };
      this.searchQuery = '';
      this.resetFiltersAction();
      this.updateUrlParams();
    },
    handlePageChange(page) {
      this.setPage(page);
      // 滚动到页面顶部
      window.scrollTo(0, 0);
    },
    updateUrlParams() {
      const query = {};
      if (this.filters.category_id) query.category_id = this.filters.category_id;
      if (this.filters.gender) query.gender = this.filters.gender;
      if (this.filters.is_adopted !== null) query.is_adopted = this.filters.is_adopted;
      if (this.searchQuery) query.q = this.searchQuery;
      
      // 更新路由，但不重新加载组件
      this.$router.replace({ query }).catch(() => {});
    }
  },
  watch: {
    // 监听路由变化，更新过滤条件
    '$route.query': {
      handler(query) {
        const { category_id, gender, is_adopted } = query;
        const newFilters = { ...this.filters };
        
        if (category_id) newFilters.category_id = parseInt(category_id);
        else newFilters.category_id = null;
        
        if (gender) newFilters.gender = gender;
        else newFilters.gender = null;
        
        if (is_adopted !== undefined) newFilters.is_adopted = is_adopted === 'true';
        
        this.filters = newFilters;
        this.fetchPets();
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.pets-list {
  padding: 40px 0;
}

.filter-section {
  margin-bottom: 30px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  h3 {
    margin: 0;
  }
}

.pets-container {
  min-height: 300px;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style> 